html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    line-height: 1.5714285714285714;
}
[data-theme="dark"] {
    color: var(--cui-white-color);
    body {
        background-color: #1a1a1a;
    }
}
.space-item {
    width: 50px;
    height: 20px;
    background-color: var(--cui-primary-color);
}
.cui-icon {
    display: inline-flex;
    align-items: center;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    vertical-align: -.155em;
}

.components-layout-demo {
    box-sizing: border-box;
    position: relative;
    text-align: center;
    margin: 60px;
    height: 300px;
    border-top: 22px solid var(--cui-color-fill-1);
    border-radius: 5px 5px 0 0;
    box-shadow: var(--cui-shadow-elevated);
    color: var(--cui-color-text-1);
    &::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 12px;
        display: block;
        width: 6px;
        height: 6px;
        background-color: rgba(250,102,76,1);
        border-radius: 50%;
        box-shadow: 0 0 0 2px rgba(250,102,76,1),15px 0 0 2px rgba(251,218,50,1),30px 0 0 2px rgba(90,194,98,1);
    }
}
.layout-demo-header {
    background-color: var(--cui-color-fill-0);
}
.layout-demo-sider {
    background-color: var(--cui-color-fill-2);
}

.demo-row {
    background-image: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
}
.demo-col {
    color: #fff;
    padding: 30px 0;
    text-align: center;
    font-size: 18px;
    background: rgba(0,153,229,.7);
}
.demo-col.light,
.demo-row.light .demo-col {
    background: rgba(0,153,229,.5);
}
.demo-row.light .demo-col.light {
    background: rgba(0,153,229,.3);
}
.example-demo {
    .cm-col:nth-child(odd) .col-content {
        background: rgba(0,153,229,.7);
    }
    .col-content {
        color: #fff;
        padding: 10px 0;
        text-align: center;
        background: rgba(0,153,229,.9);
    }
}

.demo-image-lazy-vertical {
    height: 400px;
    overflow-y: auto;
}
.demo-image-lazy-vertical .cm-image {
    display: block;
    min-height: 200px;
}

.demo-carousel {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cui-info-color);
    color: #fff;
}

.demo-carousel .cm-image {
    height: 100%;
    width: 100%;
}

.colorful-stripe {
    background: linear-gradient(limegreen, transparent), linear-gradient(90deg, skyblue, transparent), linear-gradient(-90deg, coral, transparent);
    background-blend-mode: screen;
    -webkit-animation: colorfulStripeChange 5s infinite alternate linear;
            animation: colorfulStripeChange 5s infinite alternate linear;
  }
  @-webkit-keyframes colorfulStripeChange {
    100% {
      -webkit-filter: hue-rotate(360deg);
              filter: hue-rotate(360deg);
    }
  }
  @keyframes colorfulStripeChange {
    100% {
      -webkit-filter: hue-rotate(360deg);
              filter: hue-rotate(360deg);
    }
  }
.cm-demo-nav-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 10px;
    font-size: 18px;
}